/*

    Core modules
    Styles by module, core modules only
    @see http://www.positioniseverything.net/easyclearing.html

    @package      backend
    @subpackage   core

    @author       Johan Ronsse <johan@netlash.com>
                  Thomas Deceuninck <thomasdeceuninck@netlash.com>
                  Matthias Mullie <matthias@mullie.eu>
    @since        2.0

*/

/*
	Pages - tree
*/

#pagesTree {
	width: 264px;
	height: 100%;
}

	#pagesTree #treeHolder {
		width: 259px;
	}

	#treeOptions .buttonHolder {
		padding: 18px 0 0 12px;
	}

#fullwidthSwitch {
	height: 100%;
	width: 6px;
	background: #FAFAFA;
}

#fullwidthSwitch:hover,
#fullwidthSwitch:active
#fullwidthSwitch:focus {
	width: 6px;
	background: #EAEAEA url(../../images/close_w.gif) no-repeat 0 center;
}

	#fullwidthSwitch.collapsed {
		background: #EAEAEA url(/backend/core/layout/images/close_w.gif) no-repeat -6px center;
	}

	#fullwidthSwitch a {
		outline: 0;
		width: 100%;
		height: 100%;
		display: block;
	}

#pagesTree td,
#pagesTree table {
	height: 100%;
	width: 100%;
}

	#pagesTree h4 {
		padding: 4px 12px 0;
		margin: 0;
		color: #000;
		font-size: 11px;
	}

	#treeHolder #tree {
		overflow: hidden;
		width: 239px;
		border: 1px solid #DDD;
		margin: 24px;
		padding: 6px 0 0;
		margin-right: 0;
		background: #FFF;

		/* @inc .rc */
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}

	#pages.index #tree {
		padding-top: 12px;
		border-top: 1px solid #DDD;
		margin-top: 24px;
		margin-right: 9px;

		/* @inc .topRc */
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;

	}

	#pages.index #treeOptions {
		display: none;
	}

	#pagesTree #tree .tree {
		margin: 6px 6px 12px 6px;
	}

/*
	General
*/

#pagesPageTitle label {
	padding: 0 0 4px 0;
}

#pagesPageTitle span a {
	font-size: 11px;
	color: #666;
}

#editContent {
	margin: 0 0 24px 0;
	display: none;
}

/*
	Template list
	(in jQuery modal)
*/


/* Columns */

#templateList ul {
	float: left;
	padding-right: 12px;
	width: 452px;
}

#templateList ul.lastChild {
	padding-right: 0;
}

#templateList li {
	margin: 0 0 12px;

	/* @inc .rc */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

	#templateList li label {
		font-size: 12px;
	}

	#templateList li input {
		position: relative;
		top: -2px;
		left: -2px;
	}

/*
	Template visual shared code
*/

.templateVisual td:empty,
.templateVisual td.empty {
	background: #EEE url(/backend/core/layout/images/na.png) repeat;
	border: 1px solid #CCC;
}

.templateVisual td {
	text-align: center;
	border: 1px dotted #666;
	background: #FFF;
	vertical-align: middle;
}

/*
	Template visual small
*/

.templateVisual table {
	width: 100%;
	table-layout: fixed;
}

.templateVisual table {
	border-spacing: 3px;
	border-collapse: separate;
}

.templateVisual td {
	padding: 4px 2px;
	/* @inc .secondarycontent */
	font-size: 10px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}

	.templateVisual td a {
		color: #000;
	}

	.disabled .templateVisual td {
		border-color: #CCC;
		background: #FCFCFC;
	}

		.disabled .templateVisual td a {
			color: #999;
			cursor: default;
		}

/*
	Template visual large
*/

	/* Dirty padding fix */

	#tabContent.editTemplateTab {
		padding: 10px 0 0 0;
	}

	#tabContent.editTemplateTab .pageTitle {
		margin: 0 10px;
	}

	/* General table layout */

	#templateVisualFallback {
		display: none;
		margin: 10px;
	}

	#templateVisualLarge {
		clear: both;
	}

	#templateVisualFallback div#fallback {
		float: right;
		width: 100%;
	}

	#templateVisualFallback div#fallbackInfo {
		float: left;
		width: 50%;
	}

	#templateVisualLarge table,
	#templateVisualFallback table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 10px; /* If you change the value "10" change it in model.php of pages module too; for IE7 */
		table-layout: fixed;
	}

	#templateVisualFallback table {
		width: 50%;
		float: right;
	}

		#templateVisualLarge td,
		#templateVisualFallback td {
			text-align: center;
			box-shadow: 0 0 0 1px #ddd inset;
			background: #F4F4F4;
		}

		#templateVisualLarge td.empty,
		#templateVisualFallback td.empty {
			background: #EEE url(/backend/core/layout/images/na.png) repeat;
			box-shadow: 0 0 0 1px #ddd inset;
			padding: 10px;
		}

		/* Title */

		#templateVisualLarge .templatePositionTitle,
		#templateVisualFallback .templatePositionTitle {
			font-size: 11px;
			color: #000;
			background: #FFF;
			border: 1px solid #BDBDBD;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			padding: 6px 12px;
			box-shadow: 0 -1px 0 1px #FFF;
		}

		/* Blocks container */

		#templateVisualLarge .linkedBlocks,
		#templateVisualFallback .linkedBlocks {
			margin: 12px;
			border-top: 1px solid #DDD;
		}

		#templateVisualLarge .linkedBlocks:empty,
		#templateVisualFallback .linkedBlocks:empty {
			padding-top: 12px;
			margin: 0 12px;
			border-top: 0;
		}

		/* Button holder */

		#templateVisualLarge .buttonAddHolder,
		#templateVisualFallback .buttonAddHolder {
			padding: 0 12px 12px;
			width: 90px;
			margin: auto auto;
		}

		/* Block */

		#templateVisualLarge .templatePositionCurrentType,
		#templateVisualFallback .templatePositionCurrentType {
			border: 1px solid #DDD;
			border-top: 0;
			background: #FFF;
			text-align: left;
			position: relative;
			cursor: move;
			height: 54px;
			overflow: hidden;
			overflow: ellipsis;
		}

		#templateVisualLarge .templatePositionCurrentType.ui-sortable-helper,
		#templateVisualFallback .templatePositionCurrentType.ui-sortable-helper {
			border-top: 1px solid #DDD;
		}

			#templateVisualLarge .templatePositionCurrentType .templateTitle,
			#templateVisualFallback .templatePositionCurrentType .templateTitle {
				display: block;
				color: #4a4a4a;
				font-size: 11px;
				font-weight: 700;
				height: 15px;
				overflow: hidden;
				white-space: nowrap;
				-webkit-transition: color 0.3s ease-in-out;
				-moz-transition: color 0.3s ease-in-out;
				-o-transition: color 0.3s ease-in-out;
				transition: color 0.3s ease-in-out;
				margin: 12px 12px 0;
			}

			#templateVisualLarge .templatePositionCurrentType:hover .templateTitle,
			#templateVisualFallback .templatePositionCurrentType:hover .templateTitle {
				color: #000;
			}

			#templateVisualLarge .templateDisabled .templateTitle,
			#templateVisualFallback .templateDisabled .templateTitle {
				color: #aaa;
			}

			#templateVisualLarge .templatePositionCurrentType .templateDescription,
			#templateVisualFallback .templatePositionCurrentType .templateDescription {
				margin: 0 12px 12px;
				display: block;
				color: #808080;
				font-size: 11px;
				height: 15px;
				overflow: hidden;
				white-space: nowrap;
				-webkit-transition: color 0.3s ease-in-out;
				-moz-transition: color 0.3s ease-in-out;
				-o-transition: color 0.3s ease-in-out;
				transition: color 0.3s ease-in-out;
			}

			#templateVisualLarge .templatePositionCurrentType:hover .templateDescription,
			#templateVisualFallback .templatePositionCurrentType:hover .templateDescription {
				color: #222;
			}

			#templateVisualLarge .templateDisabled .templateDescription,
			#templateVisualFallback .templateDisabled .templateDescription {
				color: #bbb;
			}

			#templateVisualLarge .templatePositionCurrentType .buttonHolder,
			#templateVisualFallback .templatePositionCurrentType .buttonHolder {
				opacity: 0;
				height: 24px;
				padding: 15px 6px;
				position: absolute;
				right: 0;
				top: 0;
				-webkit-transition: opacity 0.3s ease-in-out;
				-moz-transition: opacity 0.3s ease-in-out;
				-o-transition: opacity 0.3s ease-in-out;
				transition: opacity 0.3s ease-in-out;
				z-index: 80;
			}

			#templateVisualLarge .templatePositionCurrentType:after,
			#templateVisualFallback .templatePositionCurrentType:after {
				content: ".";
				height: 54px;
				width: 0;
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				text-indent: -9999px;
				background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(20%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
				background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);
				background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);
				background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);
				background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);
				-webkit-transition: width 0.3s ease-in-out;
				-moz-transition: width 0.3s ease-in-out;
				-o-transition: width 0.3s ease-in-out;
				transition: width 0.3s ease-in-out;
			}

			#templateVisualLarge .templatePositionCurrentType:hover:after,
			#templateVisualFallback .templatePositionCurrentType:hover:after {
				width: 110px;
			}

			body.touch-enabled #templateVisualLarge .templatePositionCurrentType .buttonHolder,
			body.touch-enabled #templateVisualFallback .templatePositionCurrentType .buttonHolder,
			#templateVisualLarge .templatePositionCurrentType:hover .buttonHolder,
			#templateVisualFallback .templatePositionCurrentType:hover .buttonHolder {
				opacity: 1;
			}

/*
	Pages
*/

	/*
		Index
	*/

		/*
			Table cell widths
		*/

		#pages.pagesIndex .dataGrid .user_id { width: 25%; }
		#pages.pagesIndex .dataGrid .date { width: 25%; }
		#pages.pagesIndex .dataGrid .title { width: 35%; }
		#pages.pagesIndex .dataGrid .action { width: 15%; }

	/*
		Add/edit
	*/

		/* Less important tabs go on the right side */

		#pages.pagesAddEdit .ui-tabs-nav li { float: right; }
		#pages.pagesAddEdit .ui-tabs-nav li:first-child { float: left; }

		#pages.pagesAddEdit .ui-tabs-nav li:nth-child(2) {
			margin-right: 0;
		}

	/*
		editTemplate
	*/

	#pages.editTemplate #path {
		width: 340px;
	}

/*
	Tab SEO
	Specified to #tabSEO not on module level: since it's also used in modules like blog
*/

#tabSEO #pageTitle { width: 340px; }
#tabSEO #navigationTitle { width: 160px; }
#tabSEO #metaDescription { width: 480px; }
#tabSEO #metaKeywords { width: 480px;}
#tabSEO #url { width: 340px; }

/*
	Tab Versions
	Specified to #tabVersions not on module level: since it's also used in modules like blog
*/

/* Table widths */

#tabVersions .dataGrid .title { width: 35%; }
#tabVersions .dataGrid .date { width: 20%; }
#tabVersions .dataGrid .user_id { width: 20%; }
#tabVersions .dataGrid .action { width: 25%; }


/*
	Blog
*/

	/*
		Categories
	*/

	#blog.categories .dataGrid td.name a {
		font-size: 11px;
		font-weight: 700;
	}

	/*
		Comments
	*/

	#blog.comments .dataGrid tbody .button {
		margin-bottom: 8px;
		clear: left;
	}

	/*
		Edit comment
	*/

	#blog.blogEditComment #author { width: 280px; }
	#blog.blogEditComment #email { width: 380px; }
	#blog.blogEditComment #website { width: 380px; }
	#blog.blogEditComment #text { width: 600px; height: 160px; }

	/*
		Add/edit
	*/

	#blog.blogAddEdit #categoryId { width: 170px; }
	#blog.blogAddEdit #addValue-tags { width: 120px; }
	#blog.blogAddEdit #newCategoryValue { width: 120px; }

	#blog.blogAddEdit #publishOnDate { width: 90px; }
	#blog.blogAddEdit #publishOnTime { width: 40px; }

	/*
		Settings
	*/

	#blog.blogSettings #feedburnerUrl { width: 320px; }

	/*
		Settings specific CSS
	*/

		/*
			Page: settings > website
		*/

		#settingsApiKeys table input {
			width: 240px;
		}

	/*
		Add/edit
	*/

	/* User info */
	#users.usersAddEdit .settingsUserInfo {
		margin: 0 0 14px;
	}

	#users.usersAddEdit .settingsUserInfo td {
		vertical-align: middle;
	}

	#users.usersAddEdit  .settingsUserInfo .infoGrid {
		margin: 0 0 0 12px;
	}

		#users.usersAddEdit .settingsUserInfo .infoGrid th,
		#widgetUsersStatistics .settingsUserInfo .infoGrid th {
			white-space: nowrap;
		}

		#users.usersAddEdit #email {
			width: 240px;
		}

/*
	Settings
*/

	/*
		Index
	*/

	#settings.settingsIndex #siteTitle {
		width: 320px;
	}
	
	#settings.settingsIndex #siteBeian {
		width: 150px;
	}
	
	#settings.settingsIndex #siteTongji {
		width: 820px;
	}

	#settings.settingsIndex #siteHtmlFooter,
	#settings.settingsIndex #siteHtmlHeader {
		width: 700px;
		height: 200px;
	}

	#settings.settingsIndex #facebookAdminIds {
		width: 400px;
	}

	/*
		Email
	*/

	#settings.settingsEmail #webmasterEmail {
		width: 300px;
	}

	#settings.settingsEmail #smtpPort {
		width: 40px;
	}

	#settings.settingsEmail #mailerFromName,
	#settings.settingsEmail #mailerToName {
		width: 200px;
	}

	#settings.settingsEmail #mailerFromEmail,
	#settings.settingsEmail #mailerToEmail {
		width: 320px;
	}

	/*
		Pages templates (add/edit)
	*/

	#positionsList {
		padding: 12px 0;
	}

	#positionsList .positionName,
	#positionsList .positionBlock {
		float: left;
	}

	#positionsList .addBlock {
		float: left;
		clear: left;
		margin-top: 5px;
	}

	#positionsList #addPosition {
		clear: left;
		margin: 10px 0 0 10px;
	}

	#positionsList .defaultBlocks {
		clear: left;
		margin-left: 115px;
		padding-top: 5px;
	}

	#positionsList .position {
		padding: 10px;
		clear: left;
	}

	#positionsList .defaultBlock {
		clear: left;
		padding-top: 5px;
	}

	#positionsList .position:nth-child(2n + 1) {
		background: #F1F5FA;
	}

	#positionsList .positionLabel {
		float: left;
	}

	#positionsList .iconDelete {
		margin-left: 10px;
	}

	#templateLayout > * {
		float: left;
	}

	#templateLayout > div {
		margin-left: 10px;
		width: 350px;
	}

	#templateLayout .helpTxt {
		padding-left: 0;
	}

	#templateLayout .formError {
		padding-left: 0;
	}

	#templateLayout #format {
		width: 320px;
		height: 200px;
		font-size: 12px;
		padding: 4px;
		font-family: "Menlo", "Monaco", "Courier New", Courier, monospace;
	}

/*
	Tags
*/

	/*
		Index
	*/

	#tags.tagsIndex .dataGrid td.tag a {
		font-size: 11px;
		font-weight: 700;
	}

/*
	Locale
*/

	/*
		Add/edit
	*/

	#locale.localeAddEdit select {
		font-size: 11px;
	}

	#locale.localeAddEdit #value { width: 590px; }
	#locale.localeAddEdit #name { width: 260px; }
	#locale.localeAddEdit select { width: 140px; }

	/*
		Index
	*/

	#locale.localeIndex #filter select,
	#locale.localeIndex #filter input {
		font-size: 11px;
	}

	#locale.localeIndex #value { width: 340px; }
	#locale.localeIndex #name { width: 260px; }
	#locale.localeIndex select { width: 140px; }

	#locale.localeIndex .dataFilter .help {
		top: 5px;
		margin-left: 0;
	}

	/*
		Analyse
	*/

	#locale.localeAnalyse td.used_in li code {
		font-size: 11px;
	}